<template>
  <div class="dialog">
    <header class="header">
      <div>
        我是弹框23
      </div>
      <el-icon>
        <CloseBold />
      </el-icon>
    </header>
    <main class="main">
      中间内容
    </main>
    <footer class="footer">
      <el-button size="small">
        取消
      </el-button>
      <el-button @click="onBtn" size="small" type="primary">
        确定 
      </el-button>
    </footer>
  </div>
</template>
<script setup lang='ts'>
const emit = defineEmits(['on-click'])
const onBtn = () => {
  emit('on-click', '已点击')
}
</script>
<style scoped lang='less'>
.dialog {
  width: 400px;
  height: 400px;
  background: #141414;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -200px;

  .header {
    display: flex;
    color: #cfd3dc;
    border-bottom: 1px solid #636466;
    padding: 10px;
    justify-content: space-between;
  }

  .main {
    flex: 1;
    color: #cfd3dc;
    padding: 10px;
  }

  .footer {
    border-top: 1px solid #636466;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>